import React, { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useImmer } from 'use-immer'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { SpScrollView, SpSearch } from '@/components'
import { classNames } from '@/utils'
import GoodsList from '@/pages/home/wgts/goods-list'

import {
  WgtJnCarousel,
  WgtSearchHome,
  WgtFilm,
  WgtMarquees,
  WgtSlider,
  WgtImgHotZone,
  WgtNavigation,
  WgtCoupon,
  WgtGoodsScroll,
  WgtGoodsGrid,
  WgtGoodsGridTab,
  WgtShowcase,
  WgtStore,
  WgtHeadline,
  WgtImgGif,
  WgtHotTopic,
  WgtFloorImg,
  WgtNearbyShop
} from '../wgts'
import './home-wgts.scss'
import { WgtHomeHeader } from '@/pages/home/wgts'

const initialState = {
  localWgts: [],
  searchMethod: null
}
function HomeWgts(props) {
  const { wgts, dtid, onLoad = () => {}, children, pageName } = props
  const [state, setState] = useImmer(initialState)
  const { localWgts, searchMethod } = state

  const fetch = ({ pageIndex, pageSize }) => {
    const x = pageSize * pageIndex
    const twgt = wgts.slice(x - pageSize, x > wgts.length ? wgts.length : x)
    const storeClick = () => {
      Taro.navigateTo({
        url: `/subpages/store/item-list?dtid=${dtid}`
      })
    }
    let searchMethod = dtid && storeClick
    setState((draft) => {
      draft.localWgts[pageIndex - 1] = twgt
      draft.searchMethod = searchMethod
    })

    return {
      total: wgts.length
    }
  }
  const takeawaySearchMethod = () => {
    Taro.navigateTo({
      url: `/subpages/takeaway/search`
    })
  }

  return (
    <SpScrollView className='home-wgts' fetch={fetch} pageSize={100} onLoad={onLoad}>
      {
        pageName=="shouye"?(<View>
        {localWgts.map((list) => {
          
          return list.map((item, idx) => ( idx<2&&
            <View
              // style={{ height: idx===0 ? "224px" : "",width: idx===0 ? "178px" : "100%",float: idx===0 ? "left" : ""}}
              className={classNames('wgt-wrap', {
                'wgt-float': idx===0 
              })}
              key={`${item.name}${idx}`}
              data-idx={idx}
              data-name={item.name}
            >
              {item.name === 'slider' && <WgtSlider isHomeSearch info={item} myHeight='true' />} {/** 轮播 */}
              {/** 商品滚动 */}
              {item.name === 'goodsScroll' && (
                <View className='goods-scroll-height' >
                  <WgtGoodsScroll info={item} index={idx} type='good-scroll' />
                </View>
              )}
            </View>
          ))
        })}
        {children}
        {localWgts.map((list) => {
          return list.map((item, idx) => (idx>=2&&
            <View
              className='wgt-wrap'
              key={`${item.name}${idx}`}
              data-idx={idx}
              data-name={item.name}
            >

              {item.name === 'slider' && <WgtSlider isHomeSearch info={item} />} {/** 轮播 */}
              {/** 商品滚动 */}
              {item.name === 'goodsScroll' && (
                <View className='goods-scroll-height' >
                  <WgtGoodsScroll info={item} index={idx} type='good-scroll' />
                </View>
              )}
              {(item.name === 'search' && pageName == 'custom_1' && (
                <WgtHomeHeader>
                  <SpSearch info={item} onClick={takeawaySearchMethod} />
                </WgtHomeHeader>
              )) ||
                (item.name === 'search' && <SpSearch info={item} onClick={searchMethod} />)}
              {/** 搜索 */}
              {/* {item.name === "search" && <WgtSearchHome info={item} />} */}
              {item.name === 'film' && <WgtFilm info={item} />} {/** 视频 */}
              {item.name === 'WgtJnGridCarousel' && <WgtJnCarousel info={item} />} {/** 分页导航 */}
              {item.name === 'marquees' && <WgtMarquees info={item} />} {/** 文字轮播 */}
              {item.name === 'navigation' && <WgtNavigation info={item} />} {/** 图片导航 */}
              {item.name === 'coupon' && <WgtCoupon info={item} />} {/** 优惠券 */}
              {item.name === 'imgHotzone' && <WgtImgHotZone info={item} />} {/** 热区图 */}
              {/** 商品栅格 */}
              {item.name === 'goodsGrid' && <WgtGoodsGrid info={item} index={idx} type='good-grid' />}
              {/** 商品Tab */}
              {item.name === 'goodsGridTab' && (
                <WgtGoodsGridTab info={item} index={idx} type='good-grid-tab' />
              )}
              {item.name === 'showcase' && <WgtShowcase info={item} />} {/** 橱窗 */}
              {item.name === 'headline' && <WgtHeadline info={item} />} {/** 文字标题 */}
              {item.name === 'img-gif' && <WgtImgGif info={item} />} {/** 视频图 */}
              {item.name === 'hotTopic' && <WgtHotTopic info={item} />} {/** 热点话题 */}
              {item.name === 'floorImg' && <WgtFloorImg info={item} />} {/** 楼层图片 */}
              {item.name === 'store' && <WgtStore info={item} />} {/** 推荐商铺 */}
              {item.name === 'nearbyShop' && <WgtNearbyShop info={item} />} {/** 附近商家 */}
            </View>
          ))
        })}
        <GoodsList type='home' goodsSort='4' isNav={false} />
      </View>):<View>{localWgts.map((list) => {
          return list.map((item, idx) => (
            <View
              className='wgt-wrap'
              key={`${item.name}${idx}`}
              data-idx={idx}
              data-name={item.name}
            >

              {item.name === 'slider' && <WgtSlider isHomeSearch info={item} />} {/** 轮播 */}
              {/** 商品滚动 */}
              {item.name === 'goodsScroll' && (
                <View className='goods-scroll-height' >
                  <WgtGoodsScroll info={item} index={idx} type='good-scroll' />
                </View>
              )}
              {(item.name === 'search' && pageName == 'custom_1' && (
                <WgtHomeHeader>
                  <SpSearch info={item} onClick={takeawaySearchMethod} />
                </WgtHomeHeader>
              )) ||
                (item.name === 'search' && <SpSearch info={item} onClick={searchMethod} />)}
              {/** 搜索 */}
              {/* {item.name === "search" && <WgtSearchHome info={item} />} */}
              {item.name === 'film' && <WgtFilm info={item} />} {/** 视频 */}
              {item.name === 'WgtJnGridCarousel' && <WgtJnCarousel info={item} />} {/** 分页导航 */}
              {item.name === 'marquees' && <WgtMarquees info={item} />} {/** 文字轮播 */}
              {item.name === 'navigation' && <WgtNavigation info={item} />} {/** 图片导航 */}
              {item.name === 'coupon' && <WgtCoupon info={item} />} {/** 优惠券 */}
              {item.name === 'imgHotzone' && <WgtImgHotZone info={item} />} {/** 热区图 */}
              {/** 商品栅格 */}
              {item.name === 'goodsGrid' && <WgtGoodsGrid info={item} index={idx} type='good-grid' />}
              {/** 商品Tab */}
              {item.name === 'goodsGridTab' && (
                <WgtGoodsGridTab info={item} index={idx} type='good-grid-tab' />
              )}
              {item.name === 'showcase' && <WgtShowcase info={item} />} {/** 橱窗 */}
              {item.name === 'headline' && <WgtHeadline info={item} />} {/** 文字标题 */}
              {item.name === 'img-gif' && <WgtImgGif info={item} />} {/** 视频图 */}
              {item.name === 'hotTopic' && <WgtHotTopic info={item} />} {/** 热点话题 */}
              {item.name === 'floorImg' && <WgtFloorImg info={item} />} {/** 楼层图片 */}
              {item.name === 'store' && <WgtStore info={item} />} {/** 推荐商铺 */}
              {item.name === 'nearbyShop' && <WgtNearbyShop info={item} />} {/** 附近商家 */}
            </View>
          ))
        })}</View>
      }
    </SpScrollView>
  )
}

HomeWgts.options = {
  addGlobalClass: true
}

export default HomeWgts
